<template>
  <div class="container">
    <div class="seachAndState">
      <el-form
        size="small"
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item label="时间粒度">
          <el-select v-model="formInline.time" placeholder="选择时间段">
            <el-option label="分钟" value="Min"></el-option>
            <el-option label="十分钟" value="Ten"></el-option>
            <el-option label="三十分钟" value="Thirty"></el-option>
            <el-option label="一小时" value="Hour"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="formInline.time !== 'Min'" label="数据">
          <el-select v-model="formInline.data" placeholder="选择时间段">
            <el-option label="平均值" value="平均值"></el-option>
            <el-option label="最小值" value="最小值"></el-option>
            <el-option label="最大值" value="最大值"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="formInline.timeLine"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd hh:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-search"
            type="primary"
            @click="getAllData(onGetData, 'notChangePage')"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <div class="stateClass">
        状态:
        <div :class="judgeState ? 'greenLight' : 'redLight'"></div>
        <div style="font-size: 0.9rem; margin-top: 3px">
          {{ this.deviceStatus }}
        </div>
      </div>
    </div>
    <el-table
      :header-cell-style="getRowClass"
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column fixed label="工艺名称" align="center">
        隧道窑
      </el-table-column>
      <el-table-column fixed align="center" label="时间">
        <template slot-scope="{ row }">
          {{ row.createTime }}
        </template>
      </el-table-column>
      <div v-if="control.show && tableData.length !== 0">
        <el-table-column
          align="center"
          v-for="(item, index) in tableData[0].data[control.data]"
          :key="index"
        >
          <template slot="header" slot-scope="">
            <div class="tableHead">{{ item.key.slice(0, -3) }}</div>
            <div class="tableHead">({{ item.unit }})</div>
          </template>
          <template slot-scope="{ row }">
            <div>
              {{ judgeNullValue(row.data[control.data][index].value) }}
            </div>
          </template>
        </el-table-column>
      </div>
      <div v-if="!control.show && tableData.length !== 0">
        <el-table-column
          align="center"
          v-for="(item, index) in tableData[0].data"
          :key="index"
        >
          <template slot="header" slot-scope="">
            <div class="tableHead">{{ item.key }}</div>
            <div class="tableHead">({{ item.unit }})</div>
          </template>
          <template slot-scope="{ row }">
            <div>
              {{ judgeNullValue(row.data[index].value) }}
            </div>
          </template>
        </el-table-column>
      </div>
      <!-- <el-table-column
        fixed="right"
        prop="prop"
        label="操作" >
        <template slot-scope="">
        </template>
      </el-table-column> -->
    </el-table>
    <div
      v-if="tableData.length !== 0"
      class="block"
      style="display: flex; flex-direction: row-reverse; margin-top: 10px"
    >
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currPage"
        :page-sizes="[10, 20, 30, 40]"
        :currPage-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getTunnelBoxData } from "@/api/dataCenter.js";
export default {
  name: "tunnelBox",
  data() {
    return {
      pageSize: 10,
      currPage: 1,
      total: null,
      deviceTypeId: "61d986ebfca8f66ec93084ad",
      control: {
        data: "",
        show: false,
      },
      formInline: {
        data: "平均值",
        time: "Min",
        timeLine: null,
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      tableData: [],
      deviceStatus: null,
    };
  },
  created() {},
  mounted() {
    this.getAllData();
  },
  computed: {
    judgeNullValue() {
      return function (val) {
        if (val === "") {
          return "-";
        } else {
          return val;
        }
      };
    },
    judgeState() {
      if (this.deviceStatus === "正常") {
        return true;
      } else {
        return false;
      }
    },
  },
  methods: {
    onGetData(res) {
      this.$message({
        customClass: "mess-info",
        message: res.message,
      });
    },
    getAllData(onGetData, ret) {
      const that = this;
      if (that.formInline.timeLine === null)
        that.formInline.timeLine = ["", ""];
      if (ret === "notChangePage") {
        this.currPage = 1;
      }
      const params = {
        // DTUId: 'ZZ02',
        BoxId: "b914d9515d5647079f2d866f9b1eb25f",
        pageSize: that.pageSize,
        currPage: that.currPage,
        dataTime: that.formInline.time,
        startTime: that.formInline.timeLine[0],
        endTime: that.formInline.timeLine[1],
      };
      if (that.formInline.time === "Min") {
        that.control.show = false;
      } else {
        that.control.show = true;
        that.control.data = that.formInline.data;
      }
      getTunnelBoxData(params)
        .then((res) => {
          // that.tableData = []
          if (res.data.code === 200) {
            console.log("隧道窑", res);
            that.tableData = res.data.data.dataSet;
            that.total = res.data.data.totalCount;
            that.deviceStatus = res.data.data.deviceStatus;
          }
          if (onGetData) onGetData(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAllData();
    },
    handleCurrentChange(val) {
      this.currPage = val;
      this.getAllData();
    },
  },
};
</script>

<style  scoped>
.container {
  .seachAndState {
    display: flex;
    justify-content: space-between;
    .stateClass {
      display: flex;
      height: 100%;
      padding: 5px 10px 10px 20px;
      width: 200px;
      .greenLight {
        margin: 6px 3px 4px 15px;
        width: 0.7rem;
        height: 0.7rem;
        background-color: rgb(133, 231, 163);
        border-radius: 0.4rem;
        border: 1px solid rgba(41, 241, 101, 0.349);
      }
      .redLight {
        margin: 6px 3px 4px 15px;
        width: 0.7rem;
        height: 0.7rem;
        background-color: rgb(219, 99, 99);
        border-radius: 0.4rem;
        border: 1px solid rgba(241, 148, 41, 0.349);
      }
    }
  }
}
 .el-pager .active {
  background-color: $primary !important;
}
 .el-table .el-table__cell {
  padding: 10px 0;
}
</style>
